<template>
	<div class="communityGuide">
		<div style="min-height:calc(100vh - 1rem);">
			<div class="guide-list" v-for='(list,index) in listData' :key="index"  @click="toGuideDetail(list.id)">
				<div class="guide-listBox">
				<div class="guide-content">
					<span class="guide-title">{{list.community.name}}</span>
					<span class="guide-title">{{list.title}}</span>
					<span class="guide-time">{{list.createtime | formatTime}}</span>
					<div class="guide-star">
					</div>
				</div>
				<div style="margin-top:10%;font-size:.4rem;color:#000;">></div>
				</div>
			</div>
		</div>
		<Tips v-if="show"/>
	</div>
</template>
<script>
import { Tab, Tabs } from 'vant';
import api from '../../api/api.js'
import Tips from '../../components/tips'
export default {
  filters: {
    formatTime: function time(value) {
    var now = new Date(value * 1000);
    var y = now.getFullYear();
    var m = now.getMonth() + 1;
    var d = now.getDate();
      return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
    }
  },
  data(){
    return{
      show: false,
      length: null,
      host:api.host,
      typeId: null,
      listData:[],
    }
  },
  created(){
		this.typeId = this.$route.query.id
		console.log('this.typeId',this.typeId)
    this.menu()
    this.guide()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    toGuideDetail(id){
      this.$router.push({
        path: '/communityGuideDtl',
        query: {
          id
        }
      })
    },
    // 指南列表
    guide(id){
      this.$get(api.serviceList, {
        params: {
          category_id: this.typeId
        }        
      })
      .then((response) => {
        this.listData = response.data.data.list
        this.length = response.data.data.total
        if(this.length<=0){
          this.show = true
        }else{
          this.show = false
        }
      })
      .catch((error) => {
        console.log(error)
      });
    },
    goback(){
      this.$router.go(-1)
    },
  },
  components:{
    [Tab.name]:Tab,
    [Tabs.name]:Tabs,
    Tips
  }
}
</script>
<style scoped>
.guide-list{
  background: #fff;
  margin: .25rem .3rem 0;
  border-bottom:1px solid #ccc;
}
.guide-listBox{
  height: auto;
  display: flex;
  color: #000;
}
.guide-img{
  flex:1;
}
.guide-img img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.guide-content{
  flex:2;
  font-weight: bold;
}
.guide-title{
  font-size: .3rem;
  margin: .1rem 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
} 
.guide-time{
  display: block;
  color: #FD5585;
  margin: .2rem 0;
}
</style>
